<template>
  <div>
    <div>
      <el-button type="success" @click="addClick">添加服务</el-button>
    </div>
    <div>
      <el-table :data="serverList" stripe border style="width: 100%">
        <el-table-column prop="id" label="ID" sortable width="80px">
        </el-table-column>
        <el-table-column prop="server_name" label="菜单名称" width="100px">
        </el-table-column>
        <el-table-column prop="server_path" label="菜单链接" width="120px">
        </el-table-column>
        <el-table-column prop="server_icon" label="图标" width="80px">
          <template slot-scope="scope">
            <el-avatar :src="baseURL + scope.row.server_icon"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="des" label="菜单描述"> </el-table-column>

        <el-table-column prop="limits" label="菜单权限" width="100px">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.limits > 0 ? 'primary' : 'success'"
              disable-transitions
              >{{ scope.row.limits > 0 ? "会员" : "普通" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" sortable width="80px">
        </el-table-column>
        <el-table-column
          prop="create_time"
          sortable
          label="注册时间"
          width="180px"
        >
        </el-table-column>
        <el-table-column prop="is_show" label="状态" sortable width="80px">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_show"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="
                (val) => {
                  offlineClick(val, scope.row.id);
                }
              "
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="updateClick(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" plain @click="deleteClick(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--        修改框-->
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">
      <el-form :model="updateForm" label-position="right" label-width="80px">
        <el-form-item label="菜单名称">
          <el-input
            maxlength="16"
            v-model="updateForm.server_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单导航">
          <el-input
            v-model="updateForm.server_path"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单描述">
          <el-input v-model="updateForm.des" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input
            type="number"
            v-model="updateForm.sort"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-upload
            class="avatar-uploader"
            :action="baseURL + '/api/file/icon'"
            :show-file-list="false"
            :limit="1"
            :headers="headers"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
          >
            <img :src="baseURL + updateForm.server_icon" class="avatar" />
          </el-upload>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="updateForm.limits">
            <el-option label="普通" value="0"></el-option>
            <el-option label="会员" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUserEvent">确 定</el-button>
      </div>
    </el-dialog>

    <!--      添加-->
    <el-dialog title="添加管理员" :visible.sync="addFormVisible">
      <el-form
        :rules="rules"
        :model="addForm"
        label-position="right"
        ref="ruleForm"
        label-width="80px"
      >
        <el-form-item label="菜单名称" prop="server_name">
          <el-input v-model="addForm.server_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单导航" prop="server_path">
          <el-input v-model="addForm.server_path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单描述" prop="des">
          <el-input v-model="addForm.des" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="des">
          <el-input
            type="number"
            v-model="addForm.sort"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="server_icon">
          <el-upload
            class="avatar-uploader"
            :action="baseURL + '/api/file/upload'"
            :show-file-list="false"
            :limit="1"
            :headers="headers"
            :before-upload="beforeAvatarUpload"
            :on-success="addAvatarSuccess"
          >
            <img
              v-if="addForm.server_icon"
              :src="baseURL + addForm.server_icon"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="类型" prop="limits">
          <el-select v-model="addForm.limits">
            <el-option label="普通" value="0"></el-option>
            <el-option label="会员" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserEvent">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addServer, deleServer, editServer, getServer } from "@/request";
import StateCircle from "@/components/StateCircle";

export default {
  name: "nav",
  data() {
    return {
      serverList: [],
      dialogFormVisible: false,
      updateForm: {},
      headers: {
        // 请求头部参数
        Authorization: this.$store.state.token.tokenn,
      },
      addFormVisible: false,
      addForm: {
        server_name: null,
        server_path: null,
        des: null,
        sort: 0,
        server_icon: null,
        limits: null,
      },
      rules: {
        server_name: [
          { required: true, message: "菜单名称", trigger: "blur" },
          {
            min: 1,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        server_icon: [
          { required: true, message: "请选择头像", trigger: "blur" },
        ],
        limits: [{ required: true, message: "请选择类型", trigger: "blur" }],
      },
    };
  },
  components: {
    StateCircle,
  },
  created() {
    this.getServerList();
  },
  methods: {
    async getServerList() {
      let data = await getServer();
      if (data.code != 200) return this.$message.error(data.message);
      this.serverList = data.data;
    },
    async offlineClick(value, id) {
      console.log(value, id);
      let data = await editServer({ id, is_show: value ? 1 : 0 });
      if (data.code != 200) return this.$message.error(data.message);
      this.$message.success("成功!");
      this.getServerList();
    },
    deleteClick(id) {
      this.$confirm("您将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let data = await deleServer({ ids: [id] });
          if (data.code != 200) return this.$message.error(data.message);
          this.$message.success("删除成功!");
          this.getServerList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    updateClick(item) {
      this.dialogFormVisible = true;
      this.updateForm = {
        id: item.id,
        server_name: item.server_name,
        server_icon: item.server_icon,
        server_path: item.server_path,
        des: item.des,
        sort: item.sort,
        limits: item.limits,
      };
    },
    async updateUserEvent() {
      console.log(this.updateForm);
      let data = await editServer(this.updateForm);
      if (data.code != 200) return this.$message.error(data.message);
      this.$message.success(data.message);
      this.getServerList();
      this.dialogFormVisible = false;
    },
    handleAvatarSuccess(res) {
      if (res.code === 200) {
        this.updateForm.server_icon = res.data.filepath;
      } else {
        this.$message.error(res.message);
      }
    },
    beforeAvatarUpload(file) {
      const isLt1M = file.size / 1024 / 1024;
      if (isLt1M > 1) {
        this.$message.error("上传头像图片大小不能超过1MB");
      }
      return isLt1M;
    },
    addClick() {
      this.addFormVisible = true;
    },
    addAvatarSuccess(res) {
      if (res.code === 200) {
        this.addForm.server_icon = res.data.filepath;
      } else {
        this.$message.error(res.message);
      }
    },
    addUserEvent() {
      let that = this;
      this.$refs["ruleForm"].validate(async (valid) => {
        if (!valid) {
          return false;
        }
        console.log(that.addForm);
        let data = await addServer(that.addForm);
        if (data.code != 200) return this.$message.error(data.message);
        this.$message.success("添加成功!");
        this.addFormVisible = false;
        this.getServerList();
      });
    },
  },
};
</script>

<style scoped>
</style>
